import { Avatar } from 'antd-mobile'
import './ShopHead.scss'
import type { ShopInfo, ShopItem } from '../../../../../api/shops'
import { useEffect } from 'react'

type Props = {
    shopInfo: ShopItem | undefined
}
const ShopHead = ({ shopInfo }: Props) => {
    // useEffect(() => {
    //     if (!shopInfo) {
    //         return
    //     }
    // }, [shopInfo])
    if (!shopInfo) {
        return <div>
            商家信息加载失败
        </div>
    }
    return <div className="head">
        <Avatar style={{ '--size': '75px' }} src={shopInfo.avatar} />
        <div className="shopInfo">
            <span className="title">{shopInfo.title}</span>
            <div className="score-sales-dlv" >
                <div className="score">
                    <span>评分</span>
                    <span className="bold">{shopInfo.score}</span>
                </div>
                <div className="score">
                    <span>月售</span>
                    <span className="bold">{shopInfo.month_sales}+</span>
                </div>
                <div className="score">
                    <span>配送时间</span>
                    <span className="bold">{shopInfo.delivery_time}分钟内送达</span>
                </div>
            </div>
        </div>
    </div>
}

export { ShopHead }